<template>
	<view>
		
	<view class="art" v-for="(item, index) in imageList"
             :key="index">
	   <view @click="ccc" id="art_touxiang"  >
	   <!-- 头像 -->
	   <image id="touxiang"  src='http://rco8i11co.hn-bkt.clouddn.com/1.jpg'></image> 
	   <view id="nicheng">
	   <text>{{item.name}}</text>
	   <text id="fans">{{item.fans}}粉丝</text>
	   </view>
	    <button id="btn">+关注</button>
	   </view>
	   <view id="img" 
	       >
	   <image  :src="item.src"></image>
	   </view>
	   <view id="miaoshu">
	    <text>1</text>
	    <text id="aixin">
			<uni-icons type="heart" color="#000"></uni-icons>
			10</text>
	   </view>
	  
	</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				imageList:[
					{
					id:1,
					name:'呵呵',
					fans:100,
					src:'http://rco8i11co.hn-bkt.clouddn.com/1.jpg'	,
					text:'动物世界'
					},
					{
					id:2,
					name:'呵呵1',
					fans:50,
					src:'http://rco8i11co.hn-bkt.clouddn.com/2.jpg'	,
					text:'动物世界2'
					},
					{
					id:3,
					name:'呵呵2',
					fans:100,
					src:'http://rco8i11co.hn-bkt.clouddn.com/3.jpg'	,
					text:'动物世界2'
					},
					{
					id:4,
					name:'呵呵3',
					fans:200,
				    src:'http://rco8i11co.hn-bkt.clouddn.com/4.jpg'	,
					text:'动物世界2'
					},
				]
			}
		},
		methods: {
			ccc(){
				uni.navigateTo({
					url: '/pages/collection_xiangqing/collection_xiangqing'
				});
			}
		}
	}
</script>

<style>
.art{
  width: 730rpx;
  display: flex;
  flex-direction: column;
  margin: auto;
 /* background-color: #F2F2F2; */
}
#art_touxiang{
    display: flex;
    justify-content: center;
    background-color: #F2F2F2;
    width: 730rpx;
    height: 220rpx;
    box-sizing: border-box;
}
#touxiang{
    display: flex;
    justify-content: center;
    width: 120rpx;
    height: 120rpx;
    margin: 15px;
    border-radius: 30px;
}
#nicheng text{
    display: flex;
    padding-top: 15px;
}

#fans{
    color:gray;
}
uni-button{
  margin-top:15px ;
    margin-right: 20px;
    width: 75px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: small;
    background-color: #DE3046;
    border-radius: 12px;
}
#img{
    margin: 10px auto;
}
#miaoshu{
    margin-left: 20px;
    background-color: yellow;
}
#aixin{
  margin-left: 180px;
  box-sizing: border-box;
}
</style>
